<?php
session_start();
if(! isset($_SESSION['username'])) {
    header('Location:index.html');
}

?>

<?php include('conn.php');

//1. 链接数据库
header("content-type:text/html;charset=utf8");
include('conn.php');
$id=$_GET['id'];
//2.执行sql
$sql_select = "select * from user where nicheng='".
$_SESSION['nicheng']."'";
$stmt = mysqli_query($conn,$sql_select);
//    var_dump($stmt);
//    die();
$user = mysqli_fetch_assoc($stmt); // 解析数据

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/tan.css">
<script src="./font/iconfont.js"></script>
<script src="./js/tan.js"></script>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="./jquery-3.5.1.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>


</head>
<style>
.table table-bordered table-hover {

outline: none;
border: 1px dashed #6ac6e2;
cursor: pointer;
border-radius: 20px;
font: bold 12px '宋体';
line-height: normal;
transition: all 0.5s;
margin-top: 5px;
display: inline-block;
color:#000;
background-color:#F2F2F2 ;
text-align: center;
}
.icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 14px;
            margin-right:5px;
}
.div{
        position: relative;
        text-align: center;
        padding-left: 500px;
    }
    .font{
        font-size: 16px;
        font-weight: bold;;
    }
    form{
font-weight: bold;
font-size: 18px;
    }
body {
background-color: #F2F2F2;
}
#msg{
height: 2rem;
text-align: center;
position: fixed;
top: 50%;
margin-top: -1rem;
line-height: 2rem;
width: 100%;
}
#msg span{
color: #fff;
background: #f05f55;
height: 2rem;
display: inline-block;
padding: 0 3rem;
border-radius: 52px;
}
        .loading {
            width: 10%;
            height: 10%;
            position: fixed;
            top: 1000px;
            left:150px;
            
            z-index: 100;
        }
body {
background-color: #F2F2F2;
}

input {
    border-radius: 20px;
}
#send  {
width: 30px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
border-radius: 20px;
font: bold 12px '宋体';
transition: all 0.5s;
margin-top: 30px;

}
#send1 {
width: 60px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
border-radius: 20px;
font: bold 12px '宋体';
transition: all 0.5s;
margin-top: 30px;
margin-left: 30px;

}
#send3 {
width: 60px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
border-radius: 20px;
font: bold 12px '宋体';
transition: all 0.5s;
margin-top: 30px;

}
 #file {
    display: none;
  }



.xn,.xt{
width: 87px;
outline: none;
border: 1px dashed #6ac6e2;
height: 29px;
cursor: pointer;
border-radius: 20px;
font: bold 12px '宋体';
line-height: normal;
transition: all 0.5s;
margin-top: 30px;
display: inline-block;
line-height: 2.5;
color:#337ab7;
}
.xn1{
width: 87px;
outline: none;
border: 1px dashed #6ac6e2;
height: 29px;
cursor: pointer;
border-radius: 20px;
font: bold 12px '宋体';
line-height: normal;
transition: all 0.5s;
margin-top: 30px;
display: inline-block;
line-height: 2.5;
color:#337ab7;
}
textarea {
padding-top: 20px;
outline: none;
border: 1px dashed #6ac6e2;
cursor: pointer;
border-radius: 20px;
font: bold 12px '宋体';
line-height: normal;
transition: all 0.5s;
margin-top: 5px;
display: inline-block;
color:#000;
background-color:#F2F2F2 ;
text-align: center;
}

.zm {
width: 130px;
outline: none;
border: 1px dashed #6ac6e2;
cursor: pointer;
border-radius: 20px;
font: bold 12px '宋体';
line-height: normal;
transition: all 0.5s;
margin-top: 5px;
display: inline-block;
color:#000;
background-color:#F2F2F2 ;
text-align: center;
}

#in2 {
border: none;
background-color: #F2F2F2;
}
li{
list-style:none;
margin-left: 120px;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
margin-left: -50px;
}
background: repeating-linear-gradient(
        -45deg,
        #e8544d,
        #e8544d 1px,
        #fff 2px,
        #fff 2px,
        #75adf8 2px,
        #75adf8 3px,
        #fff 3px,
        #fff 4px
    );
 
   
  
    
/*        
        background: url(./663.png)no-repeat; */
    }
    marquee {
        background-color: #fff;
    }
.flex {
display:flex;
justify-content:center;
align-items:center;
margin-bottom: 16px;
}
.demo {
width:100%;
height:22.85px;
position:relative;
/* background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8); */
color:#000;
opacity: 0.6;
font-size:13px;
}
.circle {
width:100px;
height:100px;
border-radius:50%;
position:relative;
background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
color:#fff;
}
.circle:before {
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:-6px;
border:5px solid transparent;
border-top:5px solid #f64f59;
border-radius:50%;
transform:rotate(45deg);
animation:circleRotate 3s linear infinite;
}
@keyframes circleRotate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}


</style>
</head>
<?php
include ("menu.php");
?>
<div style="text-align: center">

<div class="demo flex"><marquee behavior="" 
direction="">点击<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ziliao"></use>
    </svg>资料再上划可查看当前信息</marquee></div>

<script type="text/javascript">
/* 
功能:为矩形元素附上一层运动的边线
原理:  核心:css clip rect   web animation 负责动态化
注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理
如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译
*/


/* 使用
_initDanceBorder(el,option);
*/

//纯 JS实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框

/* 
测试用配置
*/
const options = [{}, {
duration: 12000,
double: false
}, {
duration: 4000,
'border-color': 'red',
'easing': 'ease-in-out'
}, {
'margin': -15,
'borderWidth': 10,
'border-image': "url(./wx.png) 10 10",

}, {
'borderWidth': 2
}]


//使用方法
for (let i = 0; i < document.getElementsByClassName('demo').length; i++) {
_initDanceBorder(document.getElementsByClassName('demo')[i], options[i]);
}

/***************************      主 体 代 码       ********************************/

//传入dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
//默认设置  尺寸单位均为px
let _options = {
    //边框模糊度  
    blur: 1,
    //距依赖元素距离 
    margin: -5,
    //边框宽度  
    borderWidth: 4,
    //转一周时长  
    duration: 8000,
    //运动效果  default:匀速
    easing: 'linear',
    //是否两条运动线  默认两条
    double: true,
    //渐变色边框 优先级高  若使用渐变色或图片背景  请正确传入该值  否则边框不会显示
    'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
    //边框色   border-image 优先级低
    'border-color': 'green'
}

//存在正常色 不存在渐变色   渐变色赋值为空
options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none')
//设置拷贝
Object.keys(_options).forEach(key => {
 options[key] && (_options[key] = options[key]);
    //double 的特殊判断
    if (key == 'double' && typeof options[key] == 'boolean') {
     _options[key] = options[key]
    }
})

//元素基本属性
const styleObj = {
 'content': '',
 'z-index': -1,
 'margin': `${_options.margin}px`,
 'border': `${_options.borderWidth}px solid`,
 'border-color': _options['border-color'],
 'border-image': _options['border-image'],
 'filter': `blur(${_options.blur}px)`,
 'position': 'absolute',
 'top': 0,
 'bottom': 0,
 'left': 0,
 'right': 0
}

const pW = el.style.width || el.offsetWidth;
const pH = el.style.height || el.offsetHeight;

const fullWidth = pW + _options.margin * -2;
const fullHeight = pH + _options.margin * -2;

//四边切割数组
const rectArray = [
`rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
`rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
`rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
`rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)`
]

const clipAnimate = [{
 clip: rectArray[0]
},
{
 clip: rectArray[1],
 offset: 0.25
},
{
 clip: rectArray[2],
 offset: 0.5
},
{
 clip: rectArray[3],
 offset: 0.75
},
{
 clip: rectArray[0],
 offset: 1
}
];

//由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
const clipAnimateTwo = [{
 clip: rectArray[2]
},
{
 clip: rectArray[3],
 offset: 0.25
},
{
 clip: rectArray[0],
 offset: 0.5
},
{
 clip: rectArray[1],
 offset: 0.75
},
{
 clip: rectArray[2],
 offset: 1
}
];

const animateOption = {
 duration: _options.duration,
 iterations: Infinity,
 easing: _options.easing
};

const section = initBaseEl();

//Web Animations  实现keyframes动画
section.animate(clipAnimate, animateOption);

//是否两条运动线
if (_options.double) {
 let sectionTwo = initBaseEl();
 sectionTwo.animate(clipAnimateTwo, animateOption);
}

//构造元素
function initBaseEl() {
 const section = document.createElement("section");
    //style属性赋值
    Object.keys(styleObj).forEach(key => {
     section.style[key] = styleObj[key]
    })

    el.appendChild(section);

    return section;
}


//页面尺寸改变  修改
}
</script>
<script>
    function alert(e){
        $("body").append("<div id='msg'><span>"+e+"</span></div>");
        clearmsg();
    }
    function clearmsg(){
        var t = setTimeout(function(){
            $("#msg").remove();
        },2000)
    };
    
   </script>
<div class="c"></div>
    <form  id="xt"  action="upload_file.php" method="post"
        enctype="multipart/form-data">
            <label for="file">请上传你的头像:</label>
        <input type="file" name="file" id="file" style="margin-left: 45%;"/> 
        <br />
        <input type="button" id='send3' name="submit" value="选择" />
        <input type="submit" id='send1' name="submit" value="确定" />
    </form>  
    
    <div class="footer" style="text-align:center; margin:20px">   
            <? if($_SESSION['img']==''){?>  
    <h4>你可以点击更换头像来设置头像</h4>
           <?}?>
    <br>
        <? if($_SESSION['img']==''){?>  
        <a href="https://jq.qq.com/?_wv=1027&k=qCPXle6A"><img src="img/logo.jpg" width="80" /></a> 
        <?}else{?>
        <a href="https://jq.qq.com/?_wv=1027&k=qCPXle6A"><img class="yuanxing" src="<?echo $_SESSION['img'];?>" width="80" style="border-radius: 50px; border: 1px solid #7492f6; width:100px;height:100px;margin: 5px 5px 5px 0;padding: 2px;
    position: absolute;
    border-radius: 50px;


" /></a>  
        <?}?>
        <div style="line-height:32px;color:#000000;font-size:15px">@<? echo $_SESSION['nicheng']?></div>   
    <a href = 'zkx.php' class="xn1">
<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bianji"></use>
    </svg>修改资料</a>&nbsp&nbsp&nbsp&nbsp&nbsp
 <p class="xn" > <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tuichu"></use>
    </svg>退出登陆</p>&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp<p class="xt "><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-genghuan"></use>
    </svg>更换头像</p></div>
      <a href='wdx.php'class="xn1">我的消息</a>
</div>

</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ziliao"></use>
    </svg>资料

</button>
<div class="collapse" id="collapseExample">
<div class="well">
 
    
    <li class='zm'><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zhanghaoguanli"></use>
    </svg>账号:<?php echo $user['username'];?>

    <li class='zm'><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-mima"></use>
    </svg>密码:<?php echo $user['password'];?>

   

<br>
</li>

    <li class='zm'><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-dianziqianming"></use>
    </svg>个性签名:<br><textarea name=""  placeholder="点击输入" readonly class="amount_range1" cols="30" rows="10"><?php echo $_SESSION['qm'];?></textarea>
<li>
<form id="qmk" method="post" enctype="multipart/form-data">
<?php if($user['qm']==''){?>  

        <span id='k2'><input type="text" class="amount_text1" id="qm1"  
name="qm" placeholder="请输入签名">    <input type="submit"  name="
submit" id="send1" value="保存">


        <?}else{?>



         </form>  
         
          <br>

          </span>
</form>  
            <?}?>

          
<?php
if($_SERVER["REQUEST_METHOD"]=="POST") {
include('conn.php');
$qm=$_POST['qm'];
   
  

$sql = "UPDATE `user` SET `qm` = '$qm' WHERE `id` = ".$_SESSION['id'];
echo  $sql;
$rw = mysqli_query($conn, $sql);
if ($rw ) {
$_SESSION['qm'] = $qm; 


  
echo "<script>alert('已保存');</script>";
echo "<script>window.location.href='/main.php'</script>";
} else {
 echo "<script>alert(保存失败);</script>";
 

}

}


?>



           


</li>




</div>

</div>

<script>
   $(document).ready(function () {
$(".amount_range1").change(function () {
console.log("test");
var val =(".amount_range1").val();
$(".amount_text1").val(val);
});

$(".amount_text1").keyup(function () {
console.log("test");
var val = $(".amount_text1").val();
$(".amount_range1").val(val);
});
});



$('#qmk').slideUp(0)
$('textarea').click(function(){
$('#qmk').slideToggle(2000);
})

$('#xt').slideUp(0)
$('.xt').click(function(){
$('#xt').slideToggle(2000);
})
$('#send3').on('click',function(){
    $('#file').click()
  })


    $('.xn').click(function(){
         var tui = confirm("确定退出登录吗？")
         // 清空所有cookies
if(tui==true){
clearAllCookie();
function clearAllCookie() {
    var keys=document.cookie.match(/[^ =;]+(?==)/g);
    if (keys) {
        for (var i =  keys.length; i--;)
                document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString();// 清除当前域名路径的有限日期
                document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString();// Domain Name域名 清除当前域名的
                document.cookie = keys[i] + '=0;path=/;domain=baidu.com;expires=' + new Date(0).toUTCString();// 清除一级域名下的或指定的
            }
        }
            location.href = 'index.html'
        }
            })



    






    </script> 

</body>
</html>